<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
    <style>
        .root{
            margin-top: 150px;
        }
        #errorHint{
            visibility: hidden;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 10px;
            font-size: 12px;
            width: 302px;
            height: 23px;
            line-height: 23px;
            padding-left: 40px;
            box-sizing: border-box;
            color: #E5383C;
            background-color: rgb(255,235,235);
            border: rgb(250,204,198) solid 1px;
            background-image: url("./static/jingdong-icons.png");
            overflow: clip;
            background-repeat: no-repeat;
            background-position: -94px -46px;
        }
        input{
            border: none;
            outline: none;
        }
        /*input:focus{*/
        /*    border: #BBBBBB solid 1px;*/
        /*}*/
        .nameC, .psdC{
            display: flex;
            border: #BBBBBB solid 1px;
            width: 300px;
            margin: auto;
            flex-direction: row-reverse;
        }
        .userIcon{
            background-image: url("./static/jingdong-icons.png");
            overflow: clip;
            width: 38px;
            height: 38px;
            background-position: left top;
            border-right:  #BBBBBB solid 1px;
            background-repeat: no-repeat;
        }
        .nameIn, .psdIn{
            width: 261px;
            border: none;
        }
        .nameIn:focus +.userIcon{
            background-image: url("./static/jingdong-icons.png");
            overflow: clip;
            background-position: 0px -48px;
            color: bisque;
        }

        .psdIn:focus +.psdIcon{
            background-image: url("./static/jingdong-icons.png");
            overflow: clip;
            background-position: -48px -48px;
            color: bisque;
        }

        .psdC{
            margin-top: 20px;
        }
        .psdIcon{
            background-image: url("./static/jingdong-icons.png");
            overflow: clip;
            width: 38px;
            height: 38px;
            border-right:  #BBBBBB solid 1px;
            background-position-x: -48px;
            background-repeat: no-repeat;
        }
        .submit{
            width: 300px;
            height: 34px;
            background-color: #E5383C;
            border: #C96361 solid 1px;
            color: white;
            margin-left: auto;
            margin-right: auto;
            margin-top: 30px;
            cursor: pointer;
        }
        .submit a{
            display: block;
            text-decoration: none;
            color: inherit;
            text-align: center;
            line-height: 34px;
        }
        .psdCError{
            border: #E5383C solid 1px;
        }
        .psdIconError{
            background-image: url("./static/jingdong-icons.png");
            overflow: clip;
            width: 38px;
            height: 38px;
            border-right:  #E5383C solid 1px;
            background-position: -48px -96px;
            background-repeat: no-repeat;
        }
        .nameIconError{
            background-image: url("./static/jingdong-icons.png");
            overflow: clip;
            width: 38px;
            height: 38px;
            border-right:  #E5383C solid 1px;
            background-position: 0px -96px;
            background-repeat: no-repeat;
        }
    </style>
    <script>
        const baseUrl = "http://localhost:8081/StuManager/"
        <%--    ajax  name    psd  --%>
        $(function (){
            $(".submit").click(function (){
                // 需要获取到页面中的用户输入的内容
                let name = $("#nameIn").val()
                let psd = $("#psdIn").val()
                // 过滤用户名或密码是空的情况
                if (!name){
                    $("#errorHint").show().html("请输入用户名!").css("visibility","visible")
                    return;
                }
                if (!psd){
                    $("#errorHint").show().html("请输入密码!").css("visibility","visible")
                    return;
                }

                // 使用ajax 请求服务器
                let xhr = new XMLHttpRequest()
                xhr.open("post", baseUrl+"LoginServlet")
                xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded;charset=utf-8")
                xhr.onreadystatechange = function () {
                    if (this.readyState === 4) {
                        if (this.status >= 200 && this.status < 300){
                            let jsonData = this.responseText
                            console.log("服务器的响应: ",jsonData)
                            let data = JSON.parse(jsonData);
                            if (data.code === 20) {
                                // 登录成功 跳转到首页
                                window.location = baseUrl+"index.jsp";
                            }else if (data.code === 30){
                                $("#errorHint").show().html(data.msg).css("visibility","visible")
                            }
                        }
                    }
                }
                xhr.send("name="+name+"&psd=" +psd+"&action=login")
            })
        })
    </script>
</head>
<body>

<div class="root">
    <div id="errorHint">
    </div>

    <div id="nameC" class="nameC">
        <input id="nameIn" class="nameIn" type="text" autofocus placeholder="请输入用户名">
        <div id="userIcon" class="userIcon"></div>
    </div>

    <div id="psdCID" class="psdC">
        <input id="psdIn" class="psdIn" type="password" placeholder="请输入密码">
        <div id="psdIconID" class="psdIcon"></div>
    </div>

    <div id="submit" class="submit" ><a >登录</a></div>
</div>
</body>
</html>